
  <template>
    <div class="block" >
<!--      <span class="demonstration">Default</span>-->
      <el-date-picker
          v-model="value1"
          type="datetimerange"
          range-separator="To"
          start-placeholder="Start date"
          end-placeholder="End date"
          format="YYYY-MM-DD"
      />
    </div>
   
  </template>


<script lang="ts">
import {ref} from 'vue'

export default {

  name: "Date",
  setup() {
    const value1 = ref<[Date, Date]>([
      new Date(2000, 10, 10, 10, 10),
      new Date(2000, 10, 11, 10, 10),
    ])
    const value2 = ref('')

    const shortcuts = [
      {
        text: 'Last week',
        value: () => {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
          return [start, end]
        },
      },
      {
        text: 'Last month',
        value: () => {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
          return [start, end]
        },
      },
      {
        text: 'Last 3 months',
        value: () => {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
          return [start, end]
        },
      },
    ]
    return {
      value1, value2,
    }
  }
}
</script>

<style scoped>
.block{
  margin: 50px 0;
  width: 500px;
}
</style>